var xhr = new XMLHttpRequest();

var item_name = document.querySelector('.iot_item_title')
var item_note = document.querySelector('.iot_item_note')
var item_price = document.querySelector('.iot_item_price')
var item_detail_left = document.querySelectorAll('.iot_detail_left')
var item_detail_right = document.querySelectorAll('.iot_detail_right')
var item_detail_images = document.querySelectorAll('.iot_detail_images')
var item_img = document.querySelector('#img')
var back = document.querySelector(".iot_ctb_right")
var buy = document.querySelector(".iot_btm_five")
var add_shopcar = document.querySelector(".iot_btm_four")
var tobuy = document.querySelector(".iot_click_tobuy")
var tobuy_img = document.querySelector("#tobuy_img")
// 封装清洗数据的函数，只能提取出result中的数据数组，因为每个响应格式不一样
var draw_data = (res) => {
   res = JSON.parse(res)
   let datas = res.result // 提取出datas数组
   return datas
}

xhr.addEventListener("readystatechange", function() {
   if(this.readyState === 4) {
      // console.log(this.responseText);
      datas = draw_data(this.responseText) //解包数据
      console.log(datas)



   let properties = datas.details.properties // 渲染详情栏
   for(let i=0;i<properties.length;i++){
      item_detail_left[i].innerHTML = properties[i].name
      item_detail_right[i].innerHTML = properties[i].value
      item_detail_images[i].src = datas.mainPictures[i]
   }
   item_name.innerHTML = datas.name // 渲染商品标题
   item_note.innerHTML = datas.desc // 渲染商品备注信息
   item_img.src = datas.mainPictures[0] // 渲染商品展示图片
   tobuy_img.src = datas.mainPictures[0]
   item_price.innerHTML = "￥&nbsp;"+datas.price // 渲染商品价格
   }
});

xhr.open("GET", "https://pcapi-xiaotuxian-front.itheima.net/goods?id=4000914");

xhr.send();

back.addEventListener("click",()=>{
   tobuy.style.display = 'none'
})
buy.addEventListener("click",()=>{
   window.location = "payment.html"
})
add_shopcar.addEventListener("click",()=>{
   tobuy.style.display = "flex"
})